<template>
  <div id="infor">
    <nav-header></nav-header>
    <div class="infor-content" v-show="ctnIndex == 0">
      <sidebar
        :tags="tags"
        @conIndex="getIndex($event)"
        ref="father"
        :defaultIndex="defaultIndex"
      ></sidebar>
      <div class="infor-right" v-loading="loading">
        <div class="account">
          专题/{{ tags[0].name }}
          <span class="favor-num">{{ count }}</span>
        </div>
        <div class="infor-title">全部贴子</div>
        <div v-if="res.articleShow">
          <div class="article" v-for="(item, index) in artList" :key="index">
            <div class="article-top">
              <div class="headerCtn">
                <div class="article-header" @click="goUp(item.articleUserid)">
                  <img :src="item.headImage" alt />
                </div>
                <div class="fansIcon" v-if="item.userIdentity == 1">
                  <img src="../assets/imgs/xhv.png" alt />
                </div>
                <div class="fansIcon" v-if="item.userIdentity == 2">
                  <img src="../assets/imgs/xlv.png" alt />
                </div>
                <div class="fansIcon" v-if="item.userIdentity == 3">
                  <img src="../assets/imgs/green.png" alt />
                </div>
              </div>
              <div class="article-right">
                <div class="article-name">
                  <span>{{ item.nickName }}</span>
                  <div class="stars">
                    <div
                      class="singleStar"
                      v-for="itemStar in item.stars"
                      :key="itemStar"
                    >
                      <img src="../assets/imgs/hb.png" alt />
                    </div>
                  </div>
                </div>
                <div class="article-date">{{ item.updateTime }}</div>
              </div>
              <div class="collect" @click="showCollect(item.articleId)">
                <img src="../assets/imgs/collect.png" alt />
              </div>
              <div
                class="collectModal"
                v-if="item.showCollect"
                @click="collect(item.articleId)"
              >
                <span v-if="item.isCollect == 0">添加到收藏</span>
                <span v-else>取消收藏</span>
              </div>
            </div>
            <div class="small-content">
              <div
                class="content-top"
                @click="jumpPage('artDetail', item.articleId)"
              >
                <div class="article-title">{{ item.articleTitle }}</div>
                <div class="article-content">{{ item.articleContent }}</div>
              </div>
              <viewer class="article-pic" v-if="item.show" :images="item.pic">
                <img
                  class="single-pic"
                  v-for="itemSon in item.pic"
                  :key="itemSon.index"
                  :src="itemSon"
                />
              </viewer>
              <div class="TagCtn">
                <div class="articleTag TagModule">#{{ item.interest }}</div>
                <SelectTag :talk="item.talk"></SelectTag>
              </div>
              <div class="article-btn">
                <div class="btn-single">
                  <div
                    class="btn-icon cupIcon"
                    @click="getFavor(item.articleId, item.articleUserid)"
                  >
                    <img src="../assets/imgs/dz.png" v-if="item.isPoint == 0" />
                    <img src="../assets/imgs/hz.png" v-else />
                  </div>
                  <div class="btn-number">{{ item.pointCount }}</div>
                </div>
                <div
                  class="btn-single"
                  @click="jumpPage('artDetail', item.articleId)"
                >
                  <div class="btn-icon detail">
                    <img src="../assets/imgs/hf.png" />
                  </div>
                  <div class="btn-number">{{ item.commentCount }}</div>
                </div>
                <div class="btn-single" @click="forwardBtn(item.articleId)">
                  <div class="btn-icon zhuanfa">
                    <img src="../assets/imgs/zf.png" />
                  </div>
                  <div class="btn-number">{{ item.forwardCount }}</div>
                </div>
                <div class="btn-single fenxiang">
                  <Copy :artId="item.articleId"></Copy>
                </div>
                <div class="reportBtn" @click="showReport(item.articleId)">
                  <div class="reportIcon">
                    <img src="../assets/imgs/jubaoIcon.png" alt />
                  </div>
                  <span class="reportText">举报</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="article noList" v-else>当前还没有内容哦~</div>
      </div>
    </div>

    <div class="paging" v-if="res.articleShow">
      <el-pagination
        layout="prev, pager, next"
        :total="count"
        :page-size="20"
        :background="true"
        :pager-count="7"
        @current-change="changePage"
      ></el-pagination>
    </div>
    <ForwardModal ref="forward" :listId="listId"></ForwardModal>
    <nav-footer ref="child"></nav-footer>
    <Report ref="report" :reportId="reportId"></Report>
  </div>
</template>

<script>
import defaultImg from "../assets/imgs/default.png";
import NavHeader from "../components/Header";
import NavFooter from "../components/Footer";
import Sidebar from "../components/Sidebar";
import PersonModal from "../components/PersonModal";
import ForwardModal from "../components/ForwardModal";
import Copy from "../components/Copy";
import Report from "../components/Report";
import axios from "axios";
import SelectTag from "../components/SelectTag";

export default {
  data() {
    return {
      index: "index",
      tags: [{ name: "" }],
      loading: true,
      interList: [],
      defaultIndex: 0,
      ctnIndex: 0,
      user: "",
      artList: [],
      list: "",
      isSpecial: 0,
      res: "",
      collectModal: false,
      totalPage: 0,
      currentPage: 1,
      count: 0,
      sonPage: 1,
      concernIndex: 0,
      listId: 0,
      Interestid: 0,
      reportId: 0,
    };
  },

  components: {
    NavHeader,
    Sidebar,
    NavFooter,
    PersonModal,
    ForwardModal,
    Copy,
    Report,
    SelectTag,
  },
  created() {
    console.log(this.$route);
    this.tags[0].name = this.$route.query.name;
    this.Interestid = this.$route.query.id * 1;
    this.init(`/laiwen/article/interest/list`, "list", 1, this.Interestid);
  },
  mounted() {
    this.getRem(1920, 100);
  },
  methods: {
    init(url, listName, page, id) {
      this.loading = true;
      this.$fetch(`${url}?page=${page}&limit=20&interest=${id}`, {}).then(
        (res) => {
          this.loading = false;
          this.totalPage = res.totalPages * 1;
          this.count = res.count * 1;
          this.res = res;
          this.$set(res, "articleShow", true);
          this.artList = res[listName];
          //处理图片为空的样式
          for (let i of this.artList.keys()) {
            this.$set(this.artList[i], "show", true);
            if (this.artList[i].articlePicture == "") {
              this.$set(this.artList[i], "show", false);
            }
            //处理图片数组
            let picArray = [];
            picArray = this.artList[i].articlePicture
              .split(",")
              .filter((e) => e);
            this.$set(this.artList[i], "pic", picArray);
            //处理星星数组
            let len = this.artList[i].award + 1;
            let stars = [];
            stars.length = len;
            this.$set(this.artList[i], "stars", stars);
            //处理收藏模态窗
            this.$set(this.artList[i], "showCollect", false);
            //处理talk为空的情况
            this.$set(this.artList[i], "showTalk", true);
            if (this.artList[i].talk == null) {
              this.$set(this.artList[i], "showTalk", false);
            }
          }
          //list为空的样式处理
          if (this.artList.length == 0) {
            this.$set(res, "articleShow", false);
          }
          console.log(this.artList);
        }
      );
    },
    showReport(id) {
      this.reportId = id;
      this.$refs.report.clear();
    },
    //切换到关注和粉丝
    showConcern(index) {
      this.concernIndex = index;
      this.isSpecial = 2;
    },
    //展示收藏的模态窗
    showCollect(id) {
      let res = [...this.artList].find((item) => item.articleId == id);
      res.showCollect = !res.showCollect;
    },
    //触发转发模态窗
    forwardBtn(e) {
      this.listId = e;
      this.$refs.forward.showModal();
    },
    //收藏
    collect(id) {
      let res = [...this.artList].find((item) => item.articleId == id);
      this.showCollect(id);
      let collect = {};
      this.$set(collect, "getCollectId", res.articleUserid);
      this.$set(collect, "collectPostId", res.articleId);
      this.$post(`/laiwen/collect/frontend/save`, collect).then((val) => {
        if (res.isCollect == 0) {
          res.isCollect = 1;
          this.$message.success("收藏成功");
        } else {
          res.isCollect = 0;
          this.$message("取消收藏");
        }
      });
      console.log(collect);
    },
    //点赞方法
    getFavor(articleId, userId) {
      let that = this;
      let favor = {};
      that.$set(favor, "articleId", articleId);
      that.$set(favor, "getPointId", userId);
      that.$post("/laiwen/point/frontend/save", favor).then((res) => {
        for (let i of that.artList.keys()) {
          if (articleId == that.artList[i].articleId) {
            if (that.artList[i].isPoint == 0) {
              this.$message({
                message: "点赞成功",
                type: "success",
              });
              that.artList[i].isPoint = 1;
              that.artList[i].pointCount += 1;
            } else {
              this.$message("取消点赞");
              that.artList[i].isPoint = 0;
              that.artList[i].pointCount -= 1;
            }
          }
        }
      });
    },
    //获取头部模态窗的索引值
    getNum(e) {
      console.log(`现在的索引值是${e}`);
      this.ctnIndex = e;
    },
    //点击专题
    showSpecial() {
      this.isSpecial = 1;
    },
    //跳转页面
    goHtml(e) {
      this.$router.push({
        path: `/${e}`,
      });
    },
    jumpPage(path, id) {
      this.navigate(path, id);
    },
    //Up主页面
    goUp(id) {
      this.$router.push({
        path: "/home",
        query: { id: id },
      });
    },
    //签到
    sign() {
      this.$refs.sign.showModal();
    },
    //分页方法
    changePage(size) {
      this.init(`/laiwen/article/interest/list`, "list", size, this.Interestid);
    },
    //标签详情
    favorDetail(name) {
      this.$router.push({
        path: "/favorTag",
        query: { name: `${name}` },
      });
    },
    //获取搜索的列表
    getList() {
      //获取到的列表
      console.log(this.$refs.header.Searchlist);
    },
  },
};
</script>
<style scoped src="../assets/css/tag.css"></style>
